<template>
    <div>
      <!--搜素栏-->
      <div class="search-bar">
          <van-row>
              <van-col span="2" class="icon-bar">
                <van-icon name="location-o" size="1.5rem"/>
              </van-col>
              <van-col span="22">
                 <van-search
                  v-model="searchInfo"
                  show-action
                  background="#ff304e"
                  placeholder="请输入搜索关键词"
                  @search="onSearch"
                >
                  <template #action>
                    <div @click="onSearch(searchInfo)">搜索</div>
                  </template>
                </van-search>
              </van-col>
          </van-row>
      </div>
      <!--轮播图-->
      <div>
        <van-swipe :autoplay="1000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" width="100%"/>
        </van-swipe-item>
      </van-swipe>
      </div>
      <!--导航栏-->
      <!-- <div class="index-category">
        <div class="category" v-for="(list,index) in navLists" :key="index">
            <i class="iconfont" :class="list.icon" :style="{background:list.color}"></i>
            <label>{{list.title}}</label>
        </div>
      </div> -->
      <div class="type-bar">
            <div @click="jumpCategory(item.id,item.mainName)" v-for="(item,index) in navLists" :key="index">
                <img  v-lazy="item.image" width="90%">
                <span >{{item.mainName}}</span>

            </div>
      </div>
       
      <!--商品推荐-->
      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 8px' }"
      >
        商品推荐
      </van-divider>
      <div class="index-main" id="goodsRemmend" >
          <ul>
              <li class="lists" v-for="(item,index) in goodRecomendList" :key="index">
                  <router-link :to="{path:'/goodDetail',query:{goodsId: item.id}}" >
                  <!-- <router-link :to="'/goodDetail/'+ item.id" > -->
                    <img :src="item.productImg" >
                  </router-link>
                  <div class="product-name">{{item.productName}}</div>
                  <label>
                      <b class="discount">价格:{{item.presentPrice}}</b>
                      <!-- <span class="price-text">原价:{"77"}</span>  -->
                  </label>            
              </li> 
          </ul>  
      </div>

        

       
    </div>
</template>

<script>
  import axios from 'axios'
    import { Toast } from 'vant'
    export default {
        data() {
          return {
            images: [
              require('@/assets/img/1.jpg'),
              require('@/assets/img/2.jpg'),
              require('@/assets/img/3.jpg'),
              require('@/assets/img/4.jpg')
            ],
            searchInfo: null,
            navLists:[],
            goodRecomendList:[]
          };
        },
        created(){
          // let winHeight = document.documentElement.clientHeight
          // document.getElementById('goodsRemmend').style.height=winHeight-362 +'px'
          this.getMallCategory()
          this.getGoodRecomendList()
        },
        methods:{
          onSearch(value){
            console.log("-----searchInfo-----",value);
            this.$router.push({name:'searchGoods',params:{searchInfo:value}})
          },
          getMallCategory(){//获取主分类名称列表
                axios({
                     url: 'http://localhost:3000/category/mailCategory',
                     method: 'get',
                }).then(res=>{
                    const { status,data} = res
                    if(status === 200){
                        if(data.message){
                          let navImg = []
                          data.message.map(item=>{
                            if(item.image){
                              navImg.push(item)
                            }
                          })
                            this.navLists = navImg
                            console.log(this.navLists);
                            // this.getSubCategory(this.category[0].id)
                        }
                    }else{
                        Toast('服务器错误，数据取得失败')
                    }
                })
          },
          getGoodRecomendList(){//获取商品推荐列表
                axios({
                     url: 'http://localhost:3000/goods/GoodRecomendList',
                     method: 'get',
                      
                }).then(res =>{
                    console.log(res); 
                    const{status,data} = res
                    if(status === 200){
                      if(data.message){
                        this.goodRecomendList = data.message
                      }
                    }
                    // console.log("===========================",this.goodRecomendList); 
                })
                .catch(error=>{
                    console.log(error)
                })
            },
          jumpCategory(id,name){//跳转到大类商品展示页面
            this.$router.push({name:'mainCategory',params:{categoryId:id,categoryName:name}})
          }
        }
    }
</script>

<style lang="scss" scoped>
   .search-bar{
      background-color: #ff304e;
  }
  .icon-bar{
    padding-top: .8rem;
    padding-left: .5rem;
  }
  .type-bar{
        background-color: #fff;
        margin:0 .3rem .3rem .4rem;
        border-radius: .3rem;
        font-size:14px;
        display:flex;
        flex-direction:row;
        flex-wrap: wrap;
        // flex-wrap:nowrap;
    }
    .type-bar div{
        padding:.3rem;
        font-size:12px;
        text-align: center;
        width: 21%;
        // flex:1;
    }

    .goods-recommend{
      display: flex;
    }
</style>